<template>
  <div>
    <div class="account-view">
      <div class="account-profile">
        <div class="avatar">
          <a v-if="isLogin && !!account.data"><img :src="account.data.uHeadPic" alt=""></a>
          <img v-if="!account.isLogin" src="http://www.gogagoga.cc/picfile/yhtx/no.jpg" alt="">
        </div>
        <p v-if="!isLogin"><router-link to="login">登录</router-link>&nbsp&nbsp|&nbsp&nbsp<router-link to="register">注册</router-link></p>
        <p v-if="isLogin&&account.data">昵称：{{account.data.userName}}</p>
        <div class="account-info" v-if="isLogin&&account.data">
          <div class="item">
            <div class="p-num">¥ {{account.data.uMoney}}</div>
            <div class="p-des">余额</div>
          </div>
          <div class="item">
            <div class="p-num">{{account.data.uIntegral}}</div>
            <div class="p-des">积分</div>
          </div>
          <div class="item">
            <div class="p-num">{{account.data.counponNum}}张</div>
            <div class="p-des">优惠券</div>
          </div>
        </div>
        <a @click="link({name:'setting'})" class="setting" > <icon symbol="setting"></icon></a>
      </div>
      <div class="account-order" >
        <div class="top">
          <a @click="link({name:'order'})">
            <span v-if="account.data&&account.data.noPay>0">{{account.data.noPay}}</span>
            <icon symbol="purse"></icon>
            <p>待付款</p>
          </a>
          <a @click="link({name:'order'})">
            <span v-if="account.data&&account.data.noDel>0">{{account.data.noDel}}</span>
            <icon symbol="truck"></icon>
            <p>待发货</p>
          </a>
          <a @click="link({name:'order'})">
            <span v-if="account.data&&account.data.noRej>0">{{account.data.noRej}}</span>
            <icon symbol="gift"></icon>
            <p>待收货</p>
          </a>
          <a @click="link({name:'order'})">
            <span v-if="account.data&&account.data.noEval>0">{{account.data.noEval}}</span>
            <icon symbol="order"></icon>
            <p>待评价</p>
          </a>
        </div>
        <div @click="link({name:'order'})">
          <cell title="全部订单" is-link>
            查看所有订单
            <icon symbol="right"></icon>
          </cell>
        </div>
      </div>
      <div class="account-menu">
        <a @click="link({name:'jifen'})">
          <span><icon symbol="jifen"></icon></span>
          <p>我的积分</p>
        </a>
        <a @click="link({name:'coupon'})">
          <span><icon symbol="yhq"></icon></span>
          <p>优惠券</p>
        </a>
        <a @click="link({name:'message'})">
          <span><icon symbol="bell"></icon></span>
          <p>通知消息</p>
        </a>
        <!--<a href="">-->
        <!--<span><i class="iconfont icon-xiaoxitongzhi"></i></span>-->
        <!--<p>意见反馈</p>-->
        <!--</a>-->
        <router-link to="join">
          <span><icon symbol="jm"></icon></span>
          <p>商家加盟</p>
        </router-link>
        <a  @click="link({name:'management'})">
          <span><icon symbol="zxcz"></icon></span>
          <p>账户管理</p>
        </a>
      </div>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import Icon from '@components/icon'
  import Cell from '@components/cell'
  import footerNav from '@components/footer-nav'

  const fetchAccountData = async (store) => {
    return await store.dispatch('global/user/getUser')
  }
  export default {
    components: {
      Icon,
      Cell,
      footerNav
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        account: 'global/user/getAccount'
      })
    },
    async mounted () {
      fetchAccountData(this.$store)
    },
    methods: {
      link (route) {
        if (this.isLogin) {
          this.$router.push(route)
        } else {
          this.$router.push({name: 'login', query:{redirect: '/account'}})
        }
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
